﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Add_Image.aspx.cs" Inherits="WechatSDK.Add_Image" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" id="im1">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        #chooseImage {
            height: 51px;
            width: 189px;
        }
        #previewImage {
            height: 45px;
            width: 187px;
        }
        #uploadImage {
            height: 41px;
            width: 182px;
        }
        #downloadImage {
            height: 39px;
            width: 181px;
        }
    </style>
</head>
<body>
    <div class="wxapi_container">    
<div class="wxapi_index_container">    
<ul class="label_box lbox_close wxapi_index_list">    
 
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">图像接口</a></li>    
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音频接口</a></li>    
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>    
   
</ul>    
</div>    
<div class="lbox_close wxapi_form">    
<h3 id="menu-basic">基础接口</h3>    
<span class="desc">判断当前客户端是否支持指定JS接口</span>    
<button class="btn btn_primary" id="checkJsApi">checkJsApi</button>    
<h3 id="menu-share">分享接口</h3>    
    
<h3 id="menu-image">图像接口</h3>    
<button class="btn btn_primary" id="chooseImage">chooseImage</button>    
<span class="desc">
    <br />
    <br />
    <br />
    </span>    
<button class="btn btn_primary" id="previewImage">previewImage</button>    
    <br />
    <br />
    <br />
<button class="btn btn_primary" id="uploadImage">uploadImage</button>    
    <br />
    <br />
    <br />
<button class="btn btn_primary" id="downloadImage">downloadImage</button>    
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
<h3 id="menu-voice">音频接口</h3>
    <p>&nbsp;</p>
    <p>&nbsp;</p>    
<span class="desc">开始录音接口</span>    
<button class="btn btn_primary" id="startRecord">startRecord</button>    
<span class="desc">停止录音接口</span>    
<button class="btn btn_primary" id="stopRecord">stopRecord</button>    
<span class="desc">播放语音接口</span>    
<button class="btn btn_primary" id="playVoice">playVoice</button>    
<span class="desc">暂停播放接口</span>    
<button class="btn btn_primary" id="pauseVoice">pauseVoice</button>    
<span class="desc">停止播放接口</span>    
<button class="btn btn_primary" id="stopVoice">stopVoice</button>    
<span class="desc">上传语音接口</span>    
<button class="btn btn_primary" id="uploadVoice">uploadVoice</button>    
<span class="desc">下载语音接口</span>    
<button class="btn btn_primary" id="downloadVoice">downloadVoice</button>    
<h3 id="menu-smart">智能接口</h3>    
<span class="desc">识别音频并返回识别结果接口</span>    
<button class="btn btn_primary" id="translateVoice">translateVoice</button>    
   
</div>    
</div> 
    <form id="form1" runat="server">
        
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js" type="text/javascript"></script>
        <script>
            var appId = '<%=appId %>'
               , nonceStr = '<%=nonceStr %>'
                , signature = '<%=signature %>'
                , timestamp = '<%=timestamp %>';
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名，见附录1
                jsApiList: ['checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onRecordEnd',
        'playVoice',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });

            wx.ready(function () {
                // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                document.querySelector('#checkJsApi').onclick = function () {
                    wx.checkJsApi({
                        jsApiList: [
                          'getNetworkType',
                          'previewImage'
                        ],
                        success: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });
                };


                // 3 智能接口
                var voice = {
                    localId: '',
                    serverId: ''
                };
                // 3.1 识别音频并返回识别结果
                document.querySelector('#translateVoice').onclick = function () {
                    if (voice.localId == '') {
                        alert('请先使用 startRecord 接口录制一段声音');
                        return;
                    }
                    wx.translateVoice({
                        localId: voice.localId,
                        complete: function (res) {
                            if (res.hasOwnProperty('translateResult')) {
                                alert('识别结果：' + res.translateResult);
                            } else {
                                alert('无法识别');
                            }
                        }
                    });
                };
                // 4 音频接口
                // 4.2 开始录音
                document.querySelector('#startRecord').onclick = function () {
                    wx.startRecord({
                        cancel: function () {
                            alert('用户拒绝授权录音');
                        }
                    });
                };
                // 4.3 停止录音
                document.querySelector('#stopRecord').onclick = function () {
                    wx.stopRecord({
                        success: function (res) {
                            voice.localId = res.localId;
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });
                };
                // 4.4 监听录音自动停止
                wx.onVoiceRecordEnd({
                    complete: function (res) {
                        voice.localId = res.localId;
                        alert('录音时间已超过一分钟');
                    }
                });
                // 4.5 播放音频
                document.querySelector('#playVoice').onclick = function () {
                    if (voice.localId == '') {
                        alert('请先使用 startRecord 接口录制一段声音');
                        return;
                    }
                    wx.playVoice({
                        localId: voice.localId
                    });
                };
                
                // 4.6 暂停播放音频
                document.querySelector('#pauseVoice').onclick = function () {
                    wx.pauseVoice({
                        localId: voice.localId
                    });
                };
                // 4.7 停止播放音频
                document.querySelector('#stopVoice').onclick = function () {
                    wx.stopVoice({
                        localId: voice.localId
                    });
                };
                // 4.8 监听录音播放停止
                wx.onVoicePlayEnd({
                    complete: function (res) {
                        alert('录音（' + res.localId + '）播放结束');
                    }
                });
                // 4.8 上传语音
                document.querySelector('#uploadVoice').onclick = function () {
                    if (voice.localId == '') {
                        alert('请先使用 startRecord 接口录制一段声音');
                        return;
                    }
                    wx.uploadVoice({
                        localId: voice.localId,
                        success: function (res) {
                            alert('上传语音成功，serverId 为' + res.serverId);
                            voice.serverId = res.serverId;
                            
                        }
                    });
                };
                // 4.9 下载语音
                document.querySelector('#downloadVoice').onclick = function () {
                    if (voice.serverId == '') {
                        alert('请先使用 uploadVoice 上传声音');
                        return;
                    }
                    wx.downloadVoice({
                        serverId: voice.serverId,
                        success: function (res) {
                            alert('下载语音成功，localId 为' + res.localId);
                            voice.localId = res.localId;
                        }
                    });
                };
                // 5 图片接口
                // 5.1 拍照、本地选图
                var images = {
                    localId: [],
                    serverId: []
                };
                document.querySelector('#chooseImage').onclick = function () {
                    wx.chooseImage({
                        success: function (res) {
                            images.localId = res.localIds;
                            alert('已选择 ' + res.localIds + ' 张图片');
                            document.getElementById('hide_file').value = res.localIds;
                            var i = 0, length = images.localId.length;
                            images.serverId = [];
                            function upload() {
                                wx.uploadImage({
                                    localId: images.localId[i],
                                    success: function (res) {
                                        i++;
                                        alert('已上传：' + res.serverId + '/' + length);
                                       

                                        document.getElementById("Button1").click();
                                        images.serverId.push(res.serverId);
                                        if (i < length) {
                                            upload();
                                           
                                        }
                                    },
                                    fail: function (res) {
                                        alert(JSON.stringify(res));
                                    }
                                });
                            }
                            upload();
                            
                        }
                    });
                };
                // 5.2 图片预览
                document.querySelector('#previewImage').onclick = function () {
                    wx.previewImage({
                        current: 'http:///1.jpg',
                        urls: [
                          'http://img3.douban.com/view/photo/photo/public/p1353993776.jpg',
                          'http:///1.jpg',
                          'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
                        ]
                    });
                };
                // 5.3 上传图片
                document.querySelector('#uploadImage').onclick = function () {
                    if (images.localId.length == 0) {
                        alert('请先使用 chooseImage 接口选择图片');
                        return;
                    }
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {
                                i++;
                                alert('已上传：' + res.serverId + '/' + length);
                                images.serverId.push(res.serverId);
                                if (i < length) {
                                    upload();
                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
                    }
                    upload();
                };
                // 5.4 下载图片
                document.querySelector('#downloadImage').onclick = function () {
                    if (images.serverId.length === 0) {
                        alert('请先使用 uploadImage 上传图片');
                        return;
                    }
                    var i = 0, length = images.serverId.length;
                    images.localId = [];
                    function download() {
                        wx.downloadImage({
                            serverId: images.serverId[i],
                            success: function (res) {
                                i++;
                                alert('已下载：' + res.localId);
                                
                                images.localId.push(res.localId);
                                document.getElementById('hide_file').value = res.localId;
                                document.getElementById("Button1").click();
                                if (i < length) {
                                    download();
                                }
                            }
                        });
                    }
                    download();
                };
               
                wx.error(function (res) {
                    alert(res.errMsg);
                });
               
           

           
            })     
            
        </script>


        <input id="hide_file" runat="server" />
        <br />
        <asp:Image ID="Image1" runat="server" Height="335px" Width="523px" />
        <br />
        
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="Button"  />
          <br />
        <asp:TextBox ID="TextBox1" runat="server" Width="913px"></asp:TextBox>
          <br />
        </form>
    &nbsp;
</body> 
</html>
